<script setup lang="ts" name="Home01">
    //导入ref,reactive
    import { ref,reactive } from 'vue';
    
    //`reactive`定义的响应式数据是“深层次”的
    //reactive监测到对象的属性值的改变
    let user = reactive({age:100,username:'tom'})

    let courses = reactive(['java','vue','mysql'])

    let teachers = reactive({
        info:{
            name:'蔡琪',
            //需要操作的数据
            hobbies:['睡觉','吃零食','耍滑头']
        }
    })

    let obj = reactive({
        a:{
            b:{
                c:200
            }
        }
    })


    //定义方法
    function add(){
        //proxy实例本身就是响应的
      //console.log(user);//reactive返回的是Proxy实例 -Proxy(Object) {age: 100, username: 'tom'}
      //console.log(n)
      user.age++
    }

    function changeUser(){
        //`reactive`重新分配一个新对象，会失去响应式（
        //可以使用`Object.assign`去整体替换）。
        //页面不更新
        //user = {age:101,username:'jack'}

        //页面不更新
        //user = reactive({age:101,username:'jack'})

        Object.assign(user,{age:101,username:'jack'})

        console.log(user)
    }
    function changeC(){
        obj.a.b.c++
    }
    function changeCourse(){
        //Proxy`代替`defineProperty`
        //vue2中的defineProperty,通过数组下标去修改值,是不能够被vue检测到
        //但是在vue3中Proxy本身就是响应,此处通过下标修改,是可以被vue监测到
        courses[0] = 'spring'
    }
    function changeHobby(){
        //teachers.info.hobbies=['睡觉2','吃零食2','耍滑头2']

        teachers.info = {
            name:'james',
            //需要操作的数据
            hobbies:['睡觉3','吃零食3','耍滑头3']
        }
    }
</script>
<template>
    <div class="home">
        <h1>数组响应式1</h1>
        <ul>
            <li v-for="c in courses">{{ c }}</li>
        </ul>

        <button @click="changeCourse">改变第一个课程</button>

        <hr>

        <h1>数组响应式2</h1>
        <ul>
            <li v-for="hb in teachers.info.hobbies">{{ hb }}</li>
        </ul>

        <button @click="changeHobby">改变第一个兴趣</button>

        <hr>
        <h1>setup语法糖写法</h1>
        <h1>姓名:{{user.username}}</h1>
        <h4>年龄:{{ user.age }}</h4>
        <button @click="add">年龄+1</button>
        <button @click="changeUser">改变user</button>
        <hr>
        <h1>测试深层次:{{obj.a.b.c}}</h1>
        <button @click="changeC">改变c++</button>
    </div>
</template>
<style>

</style>